<template>
  <div class="homePanel">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? 'auto' : '180px'">
        <el-menu
          class="aside-menu"
          :collapse="isCollapse"
          :default-active="default_active"
          :text-color="txt_color"
          :background-color="menu_bgcolor"
          :collapse-transition="false"
        >
          <el-menu-item class="b-switch">
            {{ !isCollapse ? $t("Logo") : "BS" }}
          </el-menu-item>
          <!-- 折叠开关 -->
          <el-menu-item class="b-switch">
            <el-switch v-model="isCollapse" />
          </el-menu-item>
          <!-- Home首页 -->
          <el-menu-item index="0" @click="toRouter('首页', 'Home', 0)">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <!-- 加入我们 -->
          <el-menu-item index="1" @click="toRouter('加入我们', 'CallMe', 1)">
            <el-icon>
              <Avatar />
            </el-icon>
            <span>加入我们</span>
          </el-menu-item>

          <el-menu-item
            index="2"
            @click="toRouter('留言板', 'MessageBoard', 2)"
          >
            <el-icon>
              <Comment />
            </el-icon>
            <span>{{ $t("aside.message") }}</span>
          </el-menu-item>

          <el-menu-item index="3" @click="toRouter('任务调度', 'Task', 3)">
            <el-icon>
              <Document />
            </el-icon>
            <span>任务调度</span>
          </el-menu-item>

          <el-menu-item
            index="4"
            @click="toRouter('个人中心', 'PersonalCenter', 3)"
          >
            <el-icon>
              <Setting />
            </el-icon>
            <span>个人中心</span>
          </el-menu-item>

          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <Setting />
              </el-icon>
              <span>{{ $t("aside.setting") }}</span>
            </template>
            <el-menu-item-group title="皮肤">
              <el-menu-item index="1-1">item one</el-menu-item>
              <el-menu-item index="1-2">item two</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 头部导航栏 -->
        <el-header>
          <el-menu
            :default-active="0"
            mode="horizontal"
            :ellipsis="false"
            :text-color="txt_color"
            :background-color="menu_bgcolor"
          >
            <el-menu-item
              width="auto"
              index="0"
              @click="toRouter('')"
              class="b-header-logo"
            >
              {{ $t("Logo") }}
            </el-menu-item>

            <div class="flex-grow" />
            <!-- 个人中心 -->
            <div class="b-avatar">
              <el-popover
                v-model="UserInfo"
                :title="`用户编号: ${UserInfo.userId}`"
                :show-arrow="false"
              >
                <template #reference>
                  <el-avatar class="user-avatar" :src="UserInfo.AvatarUrl">
                    {{ UserInfo.userName }}
                  </el-avatar>
                </template>
                <template #default>
                  <el-menu class="b-avatar-menu">
                    <el-menu-item index="1">
                      <span>个人中心</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="Exit">
                      <span>退出登录</span>
                    </el-menu-item>
                  </el-menu>
                </template>
              </el-popover>
            </div>

            <!-- 切换暗黑模式 -->
            <div class="b-dark">
              <el-switch
                class="subDark"
                @change="changeColor"
                v-model="isDark"
                :active-action-icon="Moon"
                :inactive-action-icon="Sunny"
              />
            </div>

            <!-- 中英文 -->
            <div class="b-dark">
              <el-button @click="isEnglish" text bg>
                {{ $t("title") }}
              </el-button>
            </div>

            <el-menu-item index="2">Processing Center</el-menu-item>
            <el-sub-menu index="3">
              <template #title>Workspace</template>
              <el-menu-item index="2-1">item one</el-menu-item>
              <el-menu-item index="2-2">item two</el-menu-item>
              <el-menu-item index="2-3">item three</el-menu-item>
              <el-sub-menu index="2-4">
                <template #title>item four</template>
                <el-menu-item index="2-4-1">item one</el-menu-item>
                <el-menu-item index="2-4-2">item two</el-menu-item>
                <el-menu-item index="2-4-3">item three</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-header>
        <div class="homePanel-Tags" :style="{ backgroundColor: tag_color }">
          <el-space>
            <el-tag
              v-for="tag in tags"
              :key="tag.index"
              class="mx-1"
              :closable="tag.index == 0 ? false : true"
              type="success"
              effect="dark"
              @click="topath_tag(tag.path, tag.index)"
              @close="remove_tag(tag.index)"
            >
              <span class="homePanel-Tags-span">{{ tag.title }}</span>
            </el-tag>
          </el-space>
        </div>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
//ele样式
.router-view {
  height: 100vh;
}

.b-switch {
  justify-content: center;
}

.el-popover__title {
  text-align: center !important;
}

//个人中心菜单
.el-popper {
  margin: 0px !important;
  padding: 12px 0px 0px 0px !important;

  .b-avatar-menu {
    border-right: 0px !important;
    width: 100% !important;

    .el-menu-item {
      line-height: 0px;
      height: 30px;
      display: flex;
      justify-content: center;
      text-align: center;
      width: 100% !important;
    }
  }
}

//主页面
.homePanel {
  width: 100%;
  height: 100%;

  //布局
  .el-container {
    height: 100% !important;

    //导航头
    .el-header {
      padding: 0px !important;
      //菜单
      .el-menu {
        //头像
        .b-avatar {
          display: flex;
          align-items: center;
          margin-left: 10px;
          margin-right: 10px;
        }

        .b-dark {
          display: flex;
          align-items: center;
          margin-left: 10px;
          margin-right: 10px;
        }

        //平分剩余空间，致使菜单和logo分别在两边
        .flex-grow {
          flex-grow: 1;
        }

        //logo大小，和aside一样
        .b-header-logo {
          width: 200px;
        }

        height: 100%;
      }
    }

    //侧边菜单
    .el-aside {
      // border: 1px solid peru;
      // width: 15%;
      .aside-menu {
        height: 100%;
      }
    }

    //main
    .el-container {
      padding-top: 0px !important;

      .el-main {
        padding: 20px !important;
        padding-top: 0px !important;
        height: 100vh;
        overflow: hidden;
      }
      // 标签页
      .homePanel-Tags {
        height: 40px;
        display: flex;
        margin-bottom: 5px;
        padding-left: 20px;
        .homePanel-Tags-span {
          cursor: pointer !important;
        }
      }
    }
  }
}

.el-menu-item [class^="el-icon"] {
  margin: 0px !important;
}
</style>

<script setup>
//使用图标
import {
  Avatar,
  HomeFilled,
  Comment,
  Document,
  Setting,
  Sunny,
  Moon,
} from "@element-plus/icons-vue";
import { ref, h, reactive, inject, onMounted, watch } from "vue";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

import { useStore } from "vuex";
const store = useStore();

// 标签页
const tags = reactive([]);
const topath_tag = (path, index) => {
  default_active.value = index;
  router.push(path);
};

const remove_tag = (key) => {
  var tagsData = store.state.homePanelStore.tags;
  var inde = tagsData.findIndex((r) => r.index == key);
  if (inde != -1) {
    //移除
    tagsData.splice(inde, 1);
    Object.assign(tags, tagsData);
  }
  // 导航到下一个标签页或主页
  if (tagsData.length > 1) {
    // 如果还有标签页，导航到下一个标签页
    const nextTag = tagsData[Math.min(inde, tagsData.length - 1)];
    router.push(nextTag.path);
  } else {
    // 没有标签页，导航到主页或其他默认页面
    router.push("/Home"); // 假设主页的路由名为 'home'
  }
};

// 菜单字体颜色
const menu_bgcolor = ref("#2f3e52");
const txt_color = ref("#ecf5ff");
const tag_color = ref("#F5F5F5");
//暗黑模式
import { useColorMode } from "@vueuse/core";
const isDark = ref(false);
const mode = useColorMode(); // Ref<'dark' | 'light'>
const changeColor = () => {
  mode.value = isDark.value ? "dark" : "light";
  txt_color.value = isDark.value ? "" : "#ecf5ff";
  menu_bgcolor.value = isDark.value ? "" : "#2f3e52";
  tag_color.value = isDark.value ? "" : "#F5F5F5";
};

//中英文
const i18n = inject("i18n");
const isEnglish = () => {
  if (i18n.global.locale == "cn") {
    i18n.global.locale = "en";
  } else {
    i18n.global.locale = "cn";
  }
};

//侧边栏折叠
const isCollapse = ref(false);

//用户信息
const UserInfo = reactive({
  userName: sessionStorage.getItem("userName"),
  userEmail: sessionStorage.getItem("userEmail"),
  userId: sessionStorage.getItem("userId"),
  AvatarUrl: sessionStorage.getItem("AvatarUrl"),
});

//侧导航栏跳转路由
const default_active = ref();

function toRouter(name, route, index) {
  sessionStorage.setItem("menuIndex", index);
  router.push(`/${route}`);

  // 处理标签页
  var tagsData = store.state.homePanelStore.tags;
  var inde = tagsData.findIndex((r) => r.path == route);
  if (inde == -1) {
    //新增
    tagsData.push({
      title: name,
      path: route,
      index: index,
    });
    Object.assign(tags, tagsData);
  }
}

//---个人中心---
//退出登录
const Exit = () => {
  //清空全部session
  sessionStorage.clear();
  router.push("/Login");
  ElNotification({
    title: "提示",
    message: h("i", { style: "color: teal" }, "成功退出"),
    duration: 1000,
  });
};

watch(
  tags,
  (newValue) => {
    store.commit("homePanelStore/upTags", newValue);
  },
  { deep: true }
);
watch(
  default_active,
  (newValue) => {
    store.commit("homePanelStore/upMenuIndex", newValue);
  },
  { deep: true }
);

//页面挂载执行
onMounted(() => {
  //标签页
  if (store.state.homePanelStore.tags == null) {
    var initTags = [{ title: "首页", path: "Home", index: "0" }];
    Object.assign(tags, initTags);
    default_active.value = 0;
  } else {
    Object.assign(tags, store.state.homePanelStore.tags);
    default_active.value = store.state.homePanelStore.menuIndex;
  }

  window.addEventListener("storage", handleStorageChange);
});

const handleStorageChange = (event) => {
  if (event.key === "userName") {
    // 当sessionStorage的yourSessionKey变化时更新sessionValue
    debugger;
    UserInfo.userName = event.newValue;
  }
};
</script>
